<template>
    <div class="loginContainer">
        <div class="left">
            <h1>
                登录以使用 <br />
                GROUP FOUR在线书城
            </h1>
            <p>
                没有账号？
                <el-button link type="primary" @click="$router.replace({ name: 'register' })">点此注册</el-button>
            </p>
        </div>
        <div class="right">
            <el-form :model="form" label-width="6rem" class="loginForm" :rules="rules">
                <el-form-item prop="username">
                    <el-input
                        clearable
                        :prefix-icon="userIcon"
                        placeholder="请输入用户名"
                        v-model="form.username"
                    ></el-input>
                </el-form-item>
                <el-form-item prop="password">
                    <el-input
                        clearable
                        :show-password="true"
                        placeholder="请输入密码"
                        v-model="form.password"
                        type="password"
                        :prefix-icon="lockIcon"
                    ></el-input>
                </el-form-item>
                <el-form-item prop="verifyCode">
                    <div class="verifyCode">
                        <el-input
                            :prefix-icon="verifyIcon"
                            placeholder="请输入验证码"
                            v-model="form.verifyCode"
                        ></el-input>
                        <VerifyCode ref="verifyCode" @change="changeHandler" class="code" />
                    </div>
                </el-form-item>
                <el-form-item>
                    <el-button @click="loginHandler" block>登录</el-button>
                </el-form-item>
            </el-form>
        </div>
    </div>
</template>

<script>
// @ is an alias to /src
import store from "@/store/index";
import service from "@/utils/request";
import { ElMessage } from "element-plus";
import { User, Lock, EditPen } from "@element-plus/icons-vue";
import VerifyCode from "@/components/VerifyCode.vue";
import { markRaw } from "vue";

export default {
    name: "LoginView",
    components: {
        VerifyCode,
    },
    data() {
        return {
            form: {
                username: "",
                password: "",
                verifyCode: "",
            },
            userIcon: markRaw(User),
            lockIcon: markRaw(Lock),
            verifyIcon: markRaw(EditPen),
            verify: "",
            rules: {
                username: { required: true, message: "用户名不能为空" },
                password: { required: true, message: "密码不能为空" },
                verifyCode: { required: true, message: "请输入验证码" },
            },
        };
    },
    methods: {
        changeHandler() {
            this.verify = this.$refs.verifyCode.codeString;
            // console.log(this.verify);
        },
        loginHandler() {
            if (this.form.verifyCode.toUpperCase() !== this.verify) {
                ElMessage({
                    type: "warning",
                    message: "验证码错误",
                });
                this.form.verifyCode = "";
                this.$refs.verifyCode.draw();
                return;
            }
            service
                .post("/login", {
                    username: this.form.username,
                    password: this.form.password,
                    isAdmin: 0,
                })
                .then((res) => {
                    // console.log(res);
                    if (res.ok) {
                        // console.log(store.state.isLogin);
                        ElMessage({
                            type: "success",
                            message: "登录成功，正在跳转首页",
                        });
                        const _that = this;
                        store.commit("setToken", res.data.token);
                        store.commit("checkLogin");
                        store.commit("setActiveIndex", "/");
                        store.commit("setUserInfo");
                        setTimeout(function () {
                            _that.$router.replace({ path: "/" });
                            window.location.reload();
                        }, 200);
                    } else {
                        ElMessage({
                            type: "error",
                            message: res.data,
                        });
                        this.form.password = "";
                        this.form.verifyCode = "";
                        this.$refs.verifyCode.draw();
                        return;
                    }
                });
        },
    },
    mounted() {
        this.verify = this.$refs.verifyCode.codeString;
    },
};
</script>

<style lang="scss" scoped>
.loginContainer {
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: center;
    height: 65vh;
    width: 70%;
    padding: 0 2rem;
    margin: 0 auto;

    .left {
        flex: 1;
        position: relative;
        display: flex;
        flex-direction: column;
        gap: 3rem;
        padding: 5rem 0;

        p > .el-button {
            font-weight: bold;
            transition: 0.3s;
        }

        p > .el-button:hover {
            text-decoration: underline;
        }
    }

    .left > h1::before {
        content: "";
        position: absolute;
        top: 15%;
        left: 0;
        width: 14rem;
        height: 8rem;
        background: linear-gradient(to right, var(--el-color-primary), #c471ed, #f64f54);
        z-index: -1;
        filter: blur(70px);
    }

    .right {
        flex: 1;

        .loginForm {
            .verifyCode {
                width: 100%;
                display: flex;
                justify-content: space-between;

                .el-input {
                    flex: 6;
                }

                .code {
                    flex: 4;
                    max-height: 100%;
                    margin-left: 1rem;
                }
            }

            .el-input {
                width: 100%;
                height: 40px;
                border: 0;
                outline: 0;
                line-height: 3rem;
            }
        }
    }
}
</style>
